<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点集合</title>
    <style>
        body{
            padding: 300px;
        }
        div{
            width: 300px;
            height: 30px;
            line-height: 30px;
            background-color: moccasin;
            margin-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div desc="houdunren.com">后盾人<span></span></div>
    <div desc="houdunrenxitong.com">后盾系统<span></span></div>
    <div desc="houdunrenstudy.com">后盾教程<span></span></div>
</body>
</html>


<script>
    //获取所有的div节点对象
    let divs = document.querySelectorAll("body > div");
    //创建map对象用于存储节点对象
    let mapDiv = new Map();
    //map任何数据类型都是可以当做键的
    divs.forEach((value)=>{
        mapDiv.set(value,{
            desc : value.getAttribute('desc')
        });
    });
    //map节点对象是可以进行迭代的
    mapDiv.forEach((value,div) => {
        div.addEventListener('click',function(){
            if(!!mapDiv.has(div)){
                this.style.background = 'red';
                this.querySelector('span').innerHTML = value.desc;
                mapDiv.delete(div);
            }else{
                this.style.background = 'green';
                this.querySelector('span').innerHTML = '';
                mapDiv.set(div,{
                    desc:value.desc
                });
            }
            
        });
    });
</script>